<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>销售账单数据展示</title>
    <style>
        /* 新增增强样式 */
        body {
            background: #f0f2f5;
            max-width: 100vw;
            margin: 2rem auto;
            padding: 0 20px;
        }

        /* ====== 新增边框增强样式 ====== */
        table {
            border: 2px solid #e9ecef; /* 新增外边框 */
        }

        th {
            border-right: 2px solid rgba(255, 255, 255, 0.3) !important; /* 白色分隔线 */
            border-left: 2px solid rgba(0, 0, 0, 0.05); /* 左侧微阴影 */
        }

        td {
            border-right: 1px solid #e9ecef; /* 垂直分隔线 */
            position: relative; /* 为悬浮效果准备 */
        }

        /* 最后一列去除分隔线 */
        th:last-child, td:last-child {
            border-right: none;
        }

        /* 悬浮高亮分隔线 */
        tr:hover td:not(:last-child)::after {
            content: "";
            position: absolute;
            right: -1px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #5c7cfa;
            box-shadow: 0 0 8px rgba(92, 124, 250, 0.3);
        }

        /* ====== 视觉优化补充 ====== */
        th {
            padding: 16px 20px; /* 增大表头间距 */
            font-size: 15px;
        }

        td {
            color: #495057; /* 加深字体颜色 */
            padding: 14px 20px; /* 增加单元格内间距 */
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        table {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        th {
            background: linear-gradient(145deg, #5c7cfa, #4b6efb);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        td {
            transition: background-color 0.2s;
        }

        tr:hover td {
            background-color: #f8f9fa !important;
        }

        /* 金额数字特殊样式 */
        td:nth-child(5),
        td:nth-child(6) {
            font-family: 'Courier New', monospace;
            text-align: right;
            color: #ccb22e;
        }

        /* 加载动画 */
        #loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 1.2rem;
            color: #5c7cfa;
        }

        #loading::after {
            content: "";
            width: 20px;
            height: 20px;
            border: 3px solid #ddd;
            border-top-color: #5c7cfa;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* 错误提示增强 */
        .error {
            background: #ffe3e3;
            border-left: 4px solid #ff6b6b;
            padding: 15px 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .error::before {
            content: "⚠️";
            font-size: 1.2em;
        }

        /* 响应式处理 */
        @media (max-width: 768px) {
            table {
                font-size: 14px;
            }

            th, td {
                padding: 10px;
            }

            td:nth-child(4),
            td:nth-child(7) {
                display: none;
            }

            td::after {
                display: none; /* 移动端隐藏悬浮分隔线 */
            }

            td {
                border-right: 1px solid #dee2e6; /* 加深移动端分隔线 */
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<h1>销售账单数据</h1>
<div id="loading">正在加载数据...</div>
<div id="error" class="error"></div>
<table id="dataTable">
    <thead>
    <tr>
        <th>创建时间</th>
        <th>交货单号</th>
        <th>客户名称</th>
        <th>商品描述</th>
        <th>单价（元/吨）</th>
        <th>总金额（元）</th>
        <th>备注</th>
    </tr>
    </thead>
    <tbody id="tableBody">
    </tbody>
</table>

<script>
    // API配置
    const API_URL = 'http://127.0.0.1:5001/api/user/get_data';

    // 页面元素
    const loading = document.getElementById('loading');
    const errorDiv = document.getElementById('error');
    const tableBody = document.getElementById('tableBody');

    fetch(API_URL)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP错误! 状态码: ${response.status}`);
            } else {
                return response.json(); // 解析JSON数据为JavaScript对象
            }
        })
        .then(data => {
            console.log(55555666, data); // 这里data已经是对象了
            renderTable(data); // 假设renderTable函数可以处理传入的对象或数组
        })
        .catch(error => {
            loading.style.display = 'none';
            showError(`获取数据失败: ${error.message}`);
        });

    // 渲染表格
    function renderTable(data) {
        console.log(11111111111,data[1])
        data.forEach(data => {
            console.log(data)
        })
        const html = data.map(data => `
                <tr>
                    <td>${data.occurAge || 'N/A'}</td>
                    <td>${data.numbers}</td>
                    <td>${data.client}</td>
                    <td>${data.oneText}</td>
                    <td>¥${data.univalence?.toFixed(2) || '0.00'}</td>
                    <td>¥${data.sums?.toFixed(2) || '0.00'}</td>
                    <td>${data.note || ''}</td>
                </tr>
            `).join('');
        tableBody.innerHTML = html;
    }

    // 显示错误信息
    function showError(message) {
        errorDiv.textContent = message;
        tableBody.innerHTML = '';  // 清空表格内容
    }
</script>
</body>
</html>